<template>
  <div>
    <div class="outer">
      <h2>{{ count }}</h2>
      <button @click="add">累加</button>
      <button @click="dec">累减</button>
      <button @click="addName">新增一个人名</button>
      <button @click="destroy">卸载我自己</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
      this.$emit("count", this.count);
    },
    dec() {
      this.count--;
      this.$emit("count", this.count);
    },
    addName() {
      this.$emit("list", "xiaowang");
    },
    destroy() {
      this.$destroy();
    },
  },
  beforeDestroy() {
    //$off的第一个参数是一个字符串(卸载某一个事件)或者数组(卸载多个事件)
    // this.$off(["count", "list"]);
    //卸载所有的自定义事件
    this.$off();
  },
};
</script>

<style scoped>
.outer {
  height: 200px;
  margin: 30px;
  background-color: antiquewhite;
}
</style>